<style lang="less" scoped>
.main-keyword-group {
    .btn-wrap {
        padding: 5px 0;
    }
    .online,
    .offline {
        margin-left: 0;
    }
    .second-row .manage-templet {
        margin-top: 5px;
    }
    .group {
        display: inline-block;
        vertical-align: top;
    }
}
</style>
<template>
    <div class="main main-keyword-group">
        <div class="main-header">
            <el-breadcrumb>
                <el-breadcrumb-item :to="{ path: '/operation-logs' }">操作记录</el-breadcrumb-item>
                <el-breadcrumb-item>操作记录</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="main-filters">
            <el-form :inline="true" :model="query">
                 <el-form-item label="用户">
                    <el-select v-model="query.user_id">
                        <el-option label="全部" value="all" key=""></el-option>
                        <el-option
                            v-for="item in users"
                            :label="item.name"
                            :value="item.id"
                            :key="item.id"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="票券编号">
                    <el-input v-model="query.ticket_no"></el-input>
                </el-form-item>
            </el-form>
        </div>
        <div class="main-actions">
            <div class="main-actions-label">
                共<em>{{itemsData.pagination.total}}</em>条
            </div>
             <div class="main-actions-btns">
            </div>
        </div>
        <el-table
            border
            element-loading-text="Loading..."
            v-loading.body="!itemsData.$resolved"
            :data="itemsData.items"
            @sort-change="onSortItems"
            @selection-change="onSelect"
        >
            <el-table-column prop="type" label="操作类型"></el-table-column>

            <el-table-column label="时间" inline-template>
                <div>
                    <span>{{ row.created_at | date}}</span>
                </div>
            </el-table-column>
            <el-table-column label="操作人" inline-template>
                <div>
                    <span>{{ row.user.name}}</span>
                </div>
            </el-table-column>
             <el-table-column label="票券编号" inline-template>
                <div>
                    <span>{{ row.ticket.ticket_no}}</span>
                </div>
            </el-table-column>
            <!-- <el-table-column label="状态属性" width="100" inline-template>
                <div>
                    <el-tag type="success" v-if="row.status === 1">已上架</el-tag>
                    <el-tag type="warning" v-else>已下架</el-tag>
                </div>
            </el-table-column> -->
            <!-- <el-table-column sortable="custom" prop="priority" label="排序"></el-table-column> -->
        </el-table>

        <el-pagination
            v-if="itemsData.$resolved"
            layout="prev, pager, next, jumper"
            :total="itemsData.pagination.total"
            :current-page="query.page_num"
            :page-size="query.page_size"
            @current-change="onPageChange"
        >
        </el-pagination>
    </div>
</template>

<script>
import ListController from '../controllers/list';

import LogModel from '../models/log';

import UserModel from '../models/user';
import Promise from 'bluebird';

export default new ListController({
    data() {
        return {
            ListModel: LogModel,

            query: {
                page_num: 1,
                page_size: 20,
                user_id: 'all',
                ticket_no: ''
            },
            users: [],

            // statusMap: {
            //     PENDING: TempletModel.PENDING,
            //     ONLINE: TempletModel.ONLINE,
            //     OFFLINE: TempletModel.OFFLINE,
            //     REJECTED: TempletModel.REJECTED
            // },
            // statusAlias: {
            //     [TempletModel.PENDING]: {
            //         icon: 'warning',
            //         name: '待审核'
            //     },
            //     [TempletModel.ONLINE]: {
            //         icon: 'success',
            //         name: '已上架'
            //     },
            //     [TempletModel.OFFLINE]: {
            //         icon: 'gray',
            //         name: '已下架'
            //     },
            //     [TempletModel.REJECTED]: {
            //         icon: 'danger',
            //         name: '未通过'
            //     }
            // },


            editDialogVisible: false
        };
    },
    methods: {
        beforeLoadItems() {
            return Promise.all([
                this.loadUsers(),
                // this.loadGrands(),
                // this.loadCustomers()
            ]);
        },
        loadUsers() {
            return UserModel.query()
            .$promise
            .then(types => {
                this.users = types.items;
            });
        },
    }
});
</script>
